<template>
<div>
    <div class="top">
        <router-link class="joke" to="./joke">段子集</router-link>
        <router-link class="joke" to="./dashboard">段子列表</router-link>
        <span class="front">前端新闻</span>
    </div>
</div>
</template>

<script>
// import img from '../assets/header.jpg'
export default {
    data(){
        return{

        }
    }
}
</script>

<style scoped>
    .top{
        width: 100%;
        height: 60px;
        background-color: #000;
        background-image: url('/static/header.jpg');
        background-repeat: no-repeat;
        /* 不重复 */
        background-size: 60px;
        background-position: 20px center;
    }
    .joke,
    .front{
        color: #fff;
        line-height: 60px;
        text-decoration: none;
        margin-left: 10px;
    }
    .front{
        font-size: 20px;
        font-style: italic;
        font-weight: 900;
        float: right;
        margin-right: 15px;
    }
</style>